<template>
  <!-- 客户管理 -->
  <div class="app-page">
    <el-tabs
      ref="getBottleReturnBottleTab"
      v-model="activeTabName"
      type="card"
      @tab-click="handleClickTab"
    >
      <el-tab-pane v-if="$hasTabPermission(70101)" label="领瓶" name="realCustomer">
        <get-bottle
          ref="realCustomer"
          :tree-data="treeData"
        />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(70102)" label="还瓶" name="offCustomer">
        <return-bottle ref="offCsmTab" :tree-data="treeData" />
      </el-tab-pane>
      <!-- <el-tab-pane v-if="$hasTabPermission(70103)" label="气瓶流转" name="cylinderCirculation">
        <cylinder-circulation ref="cylinderCirculation" :tree-data="treeData" />
      </el-tab-pane> -->
      <el-tab-pane v-if="$hasTabPermission(70104)" label="借调记录" name="beonLoan">
        <beonLoan ref="beonLoan" :tree-data="treeData" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(70105)" label="气瓶配送矫正记录" name="cylinderChangeRecord">
        <cylinderChangeRecord ref="cylinderChangeRecord" :tree-data="treeData" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import getBottle from './components/getBottle'
  import returnBottle from './components/returnBottle'
  // import cylinderCirculation from './components/cylinderCirculation.vue'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { queryCsmLevelMap, queryMap } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import beonLoan from '../beonLoan/index.vue'
  import cylinderChangeRecord from './components/cylinderChangeRecord'

  export default {
    name: 'getBottleReturnBottle',
    components: {
      getBottle, returnBottle, beonLoan, cylinderChangeRecord
    },
    data() {
      return {
        activeTabName: 'realCustomer',
        treeData: [],
        customerTypeMap: [],
        newFromMap: [],
        csmStatusMap: [],
        csmLevelMap: [],
        csmNewTypeMap: [],
        accCsmcardCardStatusMap: [],
        calcTypeList: [], // 收款方式
        paymenFilList: [], // 支付方式
        csmLerel: 0
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await Promise.all([this.getTreeData(), this.queryOptionsMap(), this.getCsmLevelMap()])
      // const info = { sn: 5, p5: 17704869005 }
      // this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869001 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 5000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869002 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 10000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869003 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 15000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869001 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 30000)
      // setTimeout(() => {
      //   const info = { sn: 5, p5: 17704869005 }
      //   this.$router.push({ name: 'phoneOrderDialog', params: { id: info.p5, phone: info.p5, sn: info.sn } })
      // }, 35000)
    },
    mounted() {
      this.activeTabName = this.$refs.getBottleReturnBottleTab.panes[0].name
      this.$refs.offCsmTab.fetchData({ currentPage: 1, pageSize: 20 })
      this.$watch('activeTabName', (val, oldval) => {
        if (val === 'realCustomer') {
          this.$refs.realCustomer.fetchData({ currentPage: 1, pageSize: 20 })
        } else {
          this.$refs.offCsmTab.fetchData({ currentPage: 1, pageSize: 20 })
        }
      })
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5, res6, res7] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerFromPlat' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerStatus' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerNewType' }), mergeAsyncFunc(queryMap, { enumName: 'AccCsmcardCardStatus' }), mergeAsyncFunc(queryMap, { enumName: 'CalcType' }), mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' })])
        this.customerTypeMap = res1.data // 客户类型
        this.newFromMap = res2.data // 客户来源
        this.csmStatusMap = res3.data // 客户状态
        this.csmNewTypeMap = res4.data // 开户类型
        this.accCsmcardCardStatusMap = res5.data // 充值卡状态
        this.calcTypeList = res6.data // 收款方式
        // 过滤支付方式
        const arr = ['现金', '微信支付', '支付宝', '银行支付']
        res7.data.filter(item => {
          if (arr.includes(item.desc)) {
            this.paymenFilList.push(item)
          }
        })
      },
      // 查询客户等级枚举
      async getCsmLevelMap() {
        const res = await mergeAsyncFunc(queryCsmLevelMap)
        this.csmLevelMap = JSON.parse(res.data.customerQuality)
        this.csmLerel = Number(res.data.csmLerel)
      },
      handleClickTab(tab) {
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  padding: 0;
  margin: 0;
  /deep/.el-tabs__header {
    margin: 0 0 10px;
  }
}
</style>
